<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Le styles -->
  <link rel='stylesheet' href='funcionalidad/bower_components/bootstrap/dist/css/bootstrap.min.css' media='screen'>
  <style>
    body {
      padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    }
    a.menu:after, .dropdown-toggle:after {
      content: none;
    }

    ul.nav li.dropdown:hover {
      font-weight: bold;



    }
    ul.nav li.dropdown:hover ul.dropdown-menu.submenu{
      display: block;
      margin-left: 220px;

      margin-top: -36px;

      background-color:#FFF;
      font-weight: normal;

    }

  </style>


  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

      <!-- Le fav and touch icons -->

    </head>

    <body>

      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>
      </div>

      <div class="container">

        <div id="zona-navegacion" class="span3 sidebar-nav">
          <ul id="menuLateral" class="nav nav-tabs nav-stacked">


            <li class="dropdown"><a class="dropdown-toggle" href="#menu4">Menu 4</a>
              <ul class="dropdown-menu submenu">
                <li><a  href="#menu4.1">Menu 4.1</a></li>
                <li><a  href="#menu4.2">Menu 4.2</a></li>
                <li><a  href="#menu4.3">Menu 4.3</a></li>
                <li><a  href="#menu4.4">Menu 4.4</a></li>
                <li><a  href="#menu4.5">Menu 4.5</a></li>

              </ul>
            </li>
          </ul>
        </div>

      </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="funcionalidad/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="funcionalidad/bower_components/bootstrap/dist/jsbootstrap.min.js"></script>
    <script type="text/javascript">
      $('li a').click(function(){

        var $this= $(this);
        console.log('click en ' + $this.html());
      })
    </script>

  </body>
  </html> 